<template>
  <div class="practise-item">
    <div class="left-title">
      题目{{num}}
    </div>
    <div class="right-btn">
      <i class="ion-trash-a" @click="del"></i>
    </div>
    <div class="middle-content">
      <div class="top"><el-input type="textarea" v-model="value.title"></el-input></div>
      <div class="bottom">
        <el-select
          v-model="value.type"
          @change="handleSubChange"
          size="small"
        >
          <el-option
            v-for="item,i in subTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="multi-select" v-if="value.type === 0">
          <div class="ss-lb" @click="minus">
            -
          </div>
          <ul class="ss-ls">
            <li class="ss-ls-item" v-for="item in defaultLetter" :style="checkStyle(item)" @click="check(item)">{{item}}</li>
          </ul>
          <div class="ss-rb" @click="add">
            +
          </div>
        </div>
        <div class="single-select" v-if="value.type === 1">
          <div class="ss-lb" @click="minus">
            -
          </div>
          <ul class="ss-ls">
            <li class="ss-ls-item" v-for="item in defaultLetter" :style="checkStyle(item)" @click="check(item)">{{item}}</li>
          </ul>
          <div class="ss-rb" @click="add">
            +
          </div>
        </div>
        <div class="judge-select" v-if="value.type === 2">
          <ul class="ss-ls">
            <li class="ss-ls-item" v-for="item in judge" :style="checkStyle(item)" @click="check(item)">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  name: 'practiseItem',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    num: {
      type: Number
    }
  },
  data() {
    return {
      subTypes: [
        { label: '单选', value: 0 },
        { label: '多选', value: 1 },
        { label: '判断', value: 2 }
      ],
      letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      defaultLetter: ['A', 'B', 'C', 'D'],
      judge: ['对', '错']
    };
  },
  methods: {
    handleSubChange() {
      this.value.standard_answer = []
    },
    // 增加答案
    add() {
      if (this.defaultLetter.length < 26) {
        const nl = this.letter[this.defaultLetter.length]
        this.defaultLetter.push(nl)
      }
    },
    // 减少答案
    minus() {
      if (this.defaultLetter.length >= 0) {
        this.defaultLetter.pop()
      }
    },
    // 选择答案
    check(item) {
      const index = this.value.standard_answer.indexOf(item)
      if (index > -1) {
        this.value.standard_answer.splice(index, 1)
      } else {
        if (this.value.type === 1) {
          this.value.standard_answer.push(item)
        } else {
          this.value.standard_answer = [item]
        }
      }
    },
    // 样式
    checkStyle(item) {
      const index = this.value.standard_answer.indexOf(item)
      if (index > -1) {
        return 'color: #fff;background-color: #00A2EA'
      } else {
        return ''
      }
    },
    del() {
      this.$emit('delete', this.num)
    }
  }
};
</script>

<style lang="scss" scoped>
  .practise-item{
    width: 756px;
    margin: 0 auto;
    margin-bottom: 20px;
    .left-title{
      float: left;
      width: 70px;
    }
    .middle-content{
      margin-left: 70px;
      margin-right: 40px;
      .top{

      }
      .bottom{
        margin-top: 10px;
        .single-select, .multi-select, .judge-select{
          display: inline-block;
          @mixin box{
            display: inline-block;
            cursor: pointer;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid  #e5e6e7;
            user-select: none;
          }
          .ss-lb{
            @include box;
          }
          .ss-ls{
            display: inline-block;
            .ss-ls-item{
              @include box;
            }
          }
          .ss-rb{
            @include box;
          }
        }
      }
    }
    .right-btn{
      float: right;
      width: 40px;
      font-size: 20px;
      text-align: center;
      color: #999;
      cursor: pointer;
    }
  }
</style>